<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>作业管理</title>
	<link rel="stylesheet" href="../css/common2.css">

	<style>
		.search_img {
			position: absolute;
			margin-top: 1px;
			right: 3%;
		}

		.sclass {
			margin-left: 400px;
			margin-top: -36px;
			position: relative;
		}

		.grade {
			margin-left: 200px;
			margin-top: -36px;
			position: relative;
		}

		.two {
			width: 14%;
		}

		.four {
			width: 20%;
		}

		.three {
			width: 9%;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top:30px;">
		<div class="refresh" onclick="location.reload()">刷新</div>
		<!--<img src="../image/refresh.png" alt="" class="refresh" onclick="location.reload()">-->
		<input placeholder="请选择日期" class="search ui-select" id="homeworkTime"
			style="position: absolute; right: 410px; max-width: 120px; height: 33px;">
		<div class="grade">
			<select class="ui-select search" v-model="search.classesId" style="position: absolute; right: 255px;">
				<option :value="undefined">请选择班级</option>
				<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
				</option>
			</select>
		</div>
		<div class="sclass">
			<select class="ui-select search" v-model="search.courseId" style="position: absolute; right: 100px;">
				<option :value="undefined">请选择课程</option>
				<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name"></option>
			</select>
		</div>

		<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0">

		<div class="table" style="margin-top: 55px;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						<th class="two">作业名称</th>
						<th class="two">班级</th>
						<th class="four">作业内容</th>
						<th class="four">作业内容图片</th>
						<th class="two">作业发布时间</th>
						<th class="three" v-if="able.del">删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(homework,index) in list" :key="homework.id">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="homework.checked">
							<span v-text="index+1"></span>
						</td>
						<td class="one" v-text="homework.courseName"></td>
						<td class="one" v-text="homework.classesName"></td>
						<td class="four" v-text="homework.content"></td>
						<td class="four">
							<template v-if="homework.pics">
								<img v-for="pic in homework.pics.split('|')" :src="getImg(pic)"
									style="max-width: 80px;max-height: 80px;">
							</template>
						</td>
						<td class="two" v-text="homework.publishTime"></td>
						<td class="three" v-if="able.del">
							<div>
								<div class="delete-icon option-icon" @click="del([homework.id])">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<br>
		<div class="delete" @click="batchDelete" v-if="able.del">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				classess: [],
				courses: [],
				search: {
				},
				urls: {
					del: '/pc/homework/del'
				}
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('参数错误');
					throw '找不到学校id';
				};

				this.urls.list = '/pc/homework/list/' + schoolId;
				this.schoolId = schoolId;

				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				axios.get('/pc/course/all/' + schoolId).then(function (res) {
					this.courses = res.data;
				}.bind(this));
				this.getData();
				this.laydate();
				abled('homework', this);
			},
			methods: {
				laydate: function () {
					laydate.render({
						elem: '#homeworkTime',
						done: function (value, date, endDate) {
							this.search.publishTime = value;
						}.bind(this)
					});
				},
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/homework/' + pic;
				}
			}

		}));
	</script>
</body>

</html>